<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="" id="container"></div>
		<script type="text/template" id='mytemplate'>
			<ul>
				{{#arr}}
					<li class=hd''>{{name}}的信息</li>
					<li class="bd">
						<p>年龄是：{{age}}</p>
						<p>性别是：{{sex}}</p>
					</li>
				{{/arr}}
			</ul>
		</script>
		<script src="../jslib/mustache.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var templateStr = document.getElementById('mytemplate').innerHTML
			
			var data = {
				arr: [{
						"name": "小明",
						"age": 12,
						"sex": "男"
					},
					{
						"name": "小红",
						"age": 11,
						"sex": "女"
					},
					{
						"name": "小强",
						"age": 13,
						"sex": "男"
					}
				]
			};
			
			//获取父节点
			var container = document.getElementById("container")
			var domStr =  Mustache.render(templateStr,data)
			//上树
			container.innerHTML += domStr
		</script>
	</body>
</html>
